<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>供应链供需行情</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.supply-demand-container {
			padding: 20px;
			max-width: 1400px;
			margin: 0 auto;
		}
		.page-title {
			margin-bottom: 25px;
		}
		.page-title h2 {
			margin: 0 0 8px 0;
			color: #333;
			font-size: 24px;
		}
		.page-title p {
			margin: 0;
			color: #666;
			font-size: 14px;
		}
		
		/* 统计概览 */
		.overview-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 20px;
			margin-bottom: 25px;
		}
		.overview-card {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			border-radius: 12px;
			padding: 20px;
			text-align: center;
			box-shadow: 0 6px 25px rgba(102, 126, 234, 0.25);
		}
		.overview-icon {
			font-size: 32px;
			margin-bottom: 12px;
		}
		.overview-value {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 5px;
		}
		.overview-label {
			font-size: 14px;
			opacity: 0.9;
		}
		
		/* 内容布局 */
		.content-layout {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 25px;
			margin-bottom: 25px;
		}
		.full-width {
			grid-column: 1 / -1;
		}
		
		/* 通用卡片 */
		.supply-card {
			background: #fff;
			border-radius: 12px;
			padding: 25px;
			box-shadow: 0 4px 20px rgba(0,0,0,0.08);
		}
		.card-title {
			font-size: 18px;
			font-weight: 600;
			color: #333;
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			gap: 10px;
		}
		
		/* 地图样式 */
		.map-container {
			height: 400px;
			background: #f8f9fa;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			overflow: hidden;
		}
		.map-placeholder {
			text-align: center;
			color: #666;
		}
		
		/* 货源列表 */
		.source-list {
			max-height: 350px;
			overflow-y: auto;
		}
		.source-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px;
			border: 1px solid #f0f2f5;
			border-radius: 8px;
			margin-bottom: 10px;
			transition: all 0.2s;
		}
		.source-item:hover {
			background: #f8f9fa;
			border-color: #667eea;
		}
		.source-info {
			flex: 1;
		}
		.source-name {
			font-weight: 500;
			color: #333;
			margin-bottom: 4px;
		}
		.source-details {
			font-size: 12px;
			color: #666;
			display: flex;
			gap: 15px;
		}
		.source-status {
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 500;
		}
		.status-sufficient {
			background: #f6ffed;
			color: #52c41a;
			border: 1px solid #b7eb8f;
		}
		.status-tight {
			background: #fff7e6;
			color: #fa8c16;
			border: 1px solid #ffd591;
		}
		.status-shortage {
			background: #fff1f0;
			color: #ff4d4f;
			border: 1px solid #ffccc7;
		}
		
		/* 需求匹配 */
		.demand-list {
			max-height: 350px;
			overflow-y: auto;
		}
		.demand-item {
			display: flex;
			align-items: center;
			gap: 15px;
			padding: 15px;
			border: 1px solid #f0f2f5;
			border-radius: 8px;
			margin-bottom: 10px;
		}
		.demand-icon {
			width: 40px;
			height: 40px;
			background: #667eea;
			color: white;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
		}
		.demand-content {
			flex: 1;
		}
		.demand-title {
			font-weight: 500;
			color: #333;
			margin-bottom: 4px;
		}
		.demand-meta {
			font-size: 12px;
			color: #666;
		}
		.demand-match {
			padding: 6px 12px;
			background: #f0f9ff;
			color: #1890ff;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 500;
		}
		
		/* 图表容器 */
		.chart-container {
			height: 300px;
			margin-top: 15px;
		}
		
		/* 趋势指标 */
		.trend-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 15px;
		}
		.trend-item {
			text-align: center;
			padding: 20px;
			background: #f8f9fa;
			border-radius: 8px;
			border: 1px solid #e9ecef;
		}
		.trend-value {
			font-size: 28px;
			font-weight: bold;
			margin-bottom: 8px;
		}
		.trend-label {
			font-size: 14px;
			color: #666;
			margin-bottom: 8px;
		}
		.trend-change {
			font-size: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4px;
		}
		.trend-up {
			color: #e74c3c;
		}
		.trend-down {
			color: #27ae60;
		}
		
		/* 响应式设计 */
		@media (max-width: 1200px) {
			.content-layout {
				grid-template-columns: 1fr;
			}
		}
		@media (max-width: 768px) {
			.overview-grid {
				grid-template-columns: repeat(2, 1fr);
			}
			.trend-grid {
				grid-template-columns: 1fr;
			}
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="supply-demand-container">
			<!-- 页面标题 -->
			<div class="page-title">
				<h2>供应链供需行情</h2>
				<p>货源分布、采购需求匹配与供应链数据分析</p>
			</div>

			<!-- 统计概览 -->
			<div class="overview-grid">
				<div class="overview-card">
					<div class="overview-icon">🏭</div>
					<div class="overview-value">{{overview.suppliers}}</div>
					<div class="overview-label">活跃供应商</div>
				</div>
				<div class="overview-card">
					<div class="overview-icon">📦</div>
					<div class="overview-value">{{overview.products}}</div>
					<div class="overview-label">在售商品</div>
				</div>
				<div class="overview-card">
					<div class="overview-icon">🛒</div>
					<div class="overview-value">{{overview.buyers}}</div>
					<div class="overview-label">采购商</div>
				</div>
				<div class="overview-card">
					<div class="overview-icon">🤝</div>
					<div class="overview-value">{{overview.matches}}%</div>
					<div class="overview-label">匹配成功率</div>
				</div>
				<div class="overview-card">
					<div class="overview-icon">⏱️</div>
					<div class="overview-value">{{overview.avgTime}}</div>
					<div class="overview-label">平均匹配时间(小时)</div>
				</div>
			</div>

			<!-- 供需趋势 -->
			<div class="supply-card full-width">
				<div class="card-title">
					<i class="el-icon-trending-up"></i>
					供需趋势指标
				</div>
				<div class="trend-grid">
					<div class="trend-item">
						<div class="trend-value" style="color: #67C23A;">{{trends.supply}}</div>
						<div class="trend-label">供应指数</div>
						<div class="trend-change trend-up">
							<i class="el-icon-caret-top"></i>
							+{{trends.supplyChange}}%
						</div>
					</div>
					<div class="trend-item">
						<div class="trend-value" style="color: #E6A23C;">{{trends.demand}}</div>
						<div class="trend-label">需求指数</div>
						<div class="trend-change trend-up">
							<i class="el-icon-caret-top"></i>
							+{{trends.demandChange}}%
						</div>
					</div>
					<div class="trend-item">
						<div class="trend-value" style="color: #409EFF;">{{trends.balance}}</div>
						<div class="trend-label">供需平衡指数</div>
						<div class="trend-change" :class="trends.balanceChange > 0 ? 'trend-up' : 'trend-down'">
							<i :class="'el-icon-caret-' + (trends.balanceChange > 0 ? 'top' : 'bottom')"></i>
							{{trends.balanceChange > 0 ? '+' : ''}}{{trends.balanceChange}}%
						</div>
					</div>
				</div>
			</div>

			<!-- 内容布局 -->
			<div class="content-layout">
				<!-- 货源分布地图 -->
				<div class="supply-card">
					<div class="card-title">
						<i class="el-icon-location"></i>
						货源分布地图
					</div>
					<div class="map-container" id="supplyMap">
						<div class="map-placeholder">
							<i class="el-icon-location" style="font-size: 48px; color: #ddd; margin-bottom: 10px;"></i>
							<p>货源分布热力图</p>
							<p style="font-size: 12px; color: #999;">显示全国各地区货源分布情况</p>
						</div>
					</div>
				</div>

				<!-- 实时货源 -->
				<div class="supply-card">
					<div class="card-title">
						<i class="el-icon-goods"></i>
						实时货源信息
					</div>
					<div class="source-list">
						<div v-for="source in supplySources" :key="source.id" class="source-item">
							<div class="source-info">
								<div class="source-name">{{source.product}}</div>
								<div class="source-details">
									<span>📍 {{source.location}}</span>
									<span>📦 {{source.quantity}}吨</span>
									<span>💰 ¥{{source.price}}/公斤</span>
								</div>
							</div>
							<div :class="['source-status', 'status-' + source.status]">
								{{source.statusText}}
							</div>
						</div>
					</div>
				</div>

				<!-- 采购需求 -->
				<div class="supply-card">
					<div class="card-title">
						<i class="el-icon-shopping-cart-2"></i>
						采购需求匹配
					</div>
					<div class="demand-list">
						<div v-for="demand in purchaseDemands" :key="demand.id" class="demand-item">
							<div class="demand-icon">
								<i class="el-icon-user"></i>
							</div>
							<div class="demand-content">
								<div class="demand-title">{{demand.product}}</div>
								<div class="demand-meta">
									需求量: {{demand.quantity}}吨 | 期望价格: ¥{{demand.price}}/公斤 | {{demand.location}}
								</div>
							</div>
							<div class="demand-match">{{demand.matchRate}}% 匹配</div>
						</div>
					</div>
				</div>

				<!-- 供需平衡分析 -->
				<div class="supply-card">
					<div class="card-title">
						<i class="el-icon-scale"></i>
						供需平衡分析
					</div>
					<div class="chart-container" id="balanceChart"></div>
				</div>
			</div>

			<!-- 品类供需分析 -->
			<div class="supply-card full-width">
				<div class="card-title">
					<i class="el-icon-pie-chart"></i>
					品类供需分析
				</div>
				<div class="chart-container" id="categoryChart"></div>
			</div>

			<!-- 供应链效率 -->
			<div class="supply-card full-width">
				<div class="card-title">
					<i class="el-icon-data-line"></i>
					供应链效率趋势
				</div>
				<div class="chart-container" id="efficiencyChart"></div>
			</div>
		</div>
	</div>

	<!-- 引入依赖 -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script src="https://unpkg.com/echarts@5.4.3/dist/echarts.min.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					overview: {
						suppliers: 1456,
						products: 3892,
						buyers: 2156,
						matches: 87.5,
						avgTime: 4.2
					},
					trends: {
						supply: 108.5,
						supplyChange: 5.2,
						demand: 112.3,
						demandChange: 8.1,
						balance: 96.7,
						balanceChange: -2.8
					},
					supplySources: [
						{id: 1, product: '有机白菜', location: '山东寿光', quantity: 50, price: 2.8, status: 'sufficient', statusText: '供应充足'},
						{id: 2, product: '进口三文鱼', location: '上海港', quantity: 15, price: 48.5, status: 'tight', statusText: '供应紧张'},
						{id: 3, product: '新鲜苹果', location: '陕西洛川', quantity: 80, price: 6.2, status: 'sufficient', statusText: '供应充足'},
						{id: 4, product: '冷冻虾仁', location: '广东湛江', quantity: 25, price: 35.8, status: 'shortage', statusText: '供应不足'},
						{id: 5, product: '土鸡蛋', location: '河北承德', quantity: 30, price: 8.9, status: 'sufficient', statusText: '供应充足'},
						{id: 6, product: '有机大米', location: '黑龙江五常', quantity: 120, price: 12.5, status: 'tight', statusText: '供应紧张'}
					],
					purchaseDemands: [
						{id: 1, product: '有机蔬菜', quantity: 20, price: 8.5, location: '北京朝阳', matchRate: 95},
						{id: 2, product: '进口水果', quantity: 15, price: 25.0, location: '上海浦东', matchRate: 88},
						{id: 3, product: '冷鲜肉类', quantity: 40, price: 32.0, location: '广州天河', matchRate: 72},
						{id: 4, product: '海鲜产品', quantity: 8, price: 55.0, location: '深圳南山', matchRate: 91},
						{id: 5, product: '乳制品', quantity: 60, price: 18.5, location: '成都武侯', matchRate: 83},
						{id: 6, product: '冷冻食品', quantity: 25, price: 28.5, location: '杭州西湖', matchRate: 76}
					]
				}
			},
			methods: {
				initCharts() {
					this.initBalanceChart();
					this.initCategoryChart();
					this.initEfficiencyChart();
				},
				
				initBalanceChart() {
					const chart = echarts.init(document.getElementById('balanceChart'));
					
					const dates = [];
					const supplyData = [];
					const demandData = [];
					
					// 生成15天的数据
					for (let i = 14; i >= 0; i--) {
						const date = new Date();
						date.setDate(date.getDate() - i);
						dates.push((date.getMonth() + 1) + '/' + date.getDate());
						
						supplyData.push(Math.round((Math.random() * 20 + 100) * 10) / 10);
						demandData.push(Math.round((Math.random() * 25 + 95) * 10) / 10);
					}
					
					const option = {
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross'
							}
						},
						legend: {
							data: ['供应指数', '需求指数']
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							data: dates
						},
						yAxis: {
							type: 'value'
						},
						series: [
							{
								name: '供应指数',
								type: 'line',
								data: supplyData,
								smooth: true,
								lineStyle: {color: '#67C23A'},
								areaStyle: {
									color: {
										type: 'linear',
										x: 0, y: 0, x2: 0, y2: 1,
										colorStops: [{
											offset: 0, color: 'rgba(103, 194, 58, 0.3)'
										}, {
											offset: 1, color: 'rgba(103, 194, 58, 0.05)'
										}]
									}
								}
							},
							{
								name: '需求指数',
								type: 'line',
								data: demandData,
								smooth: true,
								lineStyle: {color: '#E6A23C'},
								areaStyle: {
									color: {
										type: 'linear',
										x: 0, y: 0, x2: 0, y2: 1,
										colorStops: [{
											offset: 0, color: 'rgba(230, 162, 60, 0.3)'
										}, {
											offset: 1, color: 'rgba(230, 162, 60, 0.05)'
										}]
									}
								}
							}
						]
					};
					
					chart.setOption(option);
					window.addEventListener('resize', () => chart.resize());
				},
				
				initCategoryChart() {
					const chart = echarts.init(document.getElementById('categoryChart'));
					
					const categories = ['蔬菜类', '水果类', '肉类', '水产类', '乳制品', '粮油类'];
					const supplyData = [85, 92, 76, 68, 89, 95];
					const demandData = [78, 88, 82, 95, 85, 72];
					
					const option = {
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},
						legend: {
							data: ['供应量', '需求量']
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							data: categories
						},
						yAxis: {
							type: 'value',
							name: '指数'
						},
						series: [
							{
								name: '供应量',
								type: 'bar',
								data: supplyData,
								itemStyle: {color: '#67C23A'}
							},
							{
								name: '需求量',
								type: 'bar',
								data: demandData,
								itemStyle: {color: '#E6A23C'}
							}
						]
					};
					
					chart.setOption(option);
					window.addEventListener('resize', () => chart.resize());
				},
				
				initEfficiencyChart() {
					const chart = echarts.init(document.getElementById('efficiencyChart'));
					
					const months = ['1月', '2月', '3月', '4月', '5月', '6月'];
					const matchRate = [82, 85, 88, 87, 91, 89];
					const responseTime = [6.8, 6.2, 5.9, 5.5, 4.8, 4.2];
					
					const option = {
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross'
							}
						},
						legend: {
							data: ['匹配成功率(%)', '平均响应时间(小时)']
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							data: months
						},
						yAxis: [
							{
								type: 'value',
								name: '匹配成功率(%)',
								position: 'left'
							},
							{
								type: 'value',
								name: '响应时间(小时)',
								position: 'right'
							}
						],
						series: [
							{
								name: '匹配成功率(%)',
								type: 'line',
								yAxisIndex: 0,
								data: matchRate,
								smooth: true,
								lineStyle: {color: '#409EFF'},
								itemStyle: {color: '#409EFF'}
							},
							{
								name: '平均响应时间(小时)',
								type: 'line',
								yAxisIndex: 1,
								data: responseTime,
								smooth: true,
								lineStyle: {color: '#F56C6C'},
								itemStyle: {color: '#F56C6C'}
							}
						]
					};
					
					chart.setOption(option);
					window.addEventListener('resize', () => chart.resize());
				},
				
				refreshData() {
					// 模拟数据更新
					this.overview.matches += (Math.random() - 0.5) * 2;
					this.overview.matches = Math.round(this.overview.matches * 10) / 10;
					
					this.$message.success('供需数据已更新');
				}
			},
			
			mounted() {
				this.$nextTick(() => {
					this.initCharts();
				});
				
				// 定时刷新数据
				setInterval(() => {
					this.refreshData();
				}, 300000); // 5分钟更新一次
			}
		});
	</script>
</body>
</html>